<template>
  <div class="app-container" style="height: 100%">
    <div class="app-container-inner" style="display: flex; flex-direction: column">
      <!-- 按钮组 & 搜索条件 -->
      <div class="btn-group-search">
        <!-- 搜索条件 -->
        <div class="header flex-justify-between">
          <div class="btns">
            <el-button class="btn btn-bg1 mr5" @click="addEmp">
              <span class="iconfont icon-xinjian mr5"></span>
              新增商家
            </el-button>
          </div>
        </div>
        <div class="search">
          <el-input
            v-model.trim="search.keyword"
            class="search-input-name"
            placeholder="商家名称/商家序列号/电话/地址"
            @keyup.enter="requestEmpListApi"
          />
          <el-button class="btn btn-bg1 mr5" @click="requestEmpListApi">
            <el-icon class="mr5"> <Search /> </el-icon>搜索
          </el-button>
        </div>
      </div>
      <!-- 表单内容 -->
      <div class="table" style="flex: 1; position: relative">
        <el-table
          v-loading="loading"
          :border="true"
          :data="empList"
          element-loading-text="加载中..."
          height="100%"
          style="position: absolute"
        >
          <template #empty>
            <el-empty description="暂无数据" />
          </template>

          <!-- 序号 -->
          <el-table-column label="序号" type="index" width="50" align="center" />

          <!-- 商家编号 -->
          <el-table-column show-overflow-tooltip label="商家编号" prop="numberNo" min-width="120" />

          <!-- 商家名称 -->
          <el-table-column show-overflow-tooltip label="商家名称" prop="name" min-width="120">
            <template #default="i">
              <span class="number" @click="detailPage(i.row)">{{ i.row.name }}</span>
            </template>
          </el-table-column>

          <!-- 商家状态 -->
          <el-table-column show-overflow-tooltip label="商家状态" width="90">
            <template #header>
              <span class="style_condition">商家状态</span>
              <el-popover ref="popoverDom" placement="bottom" :width="80">
                <template #reference>
                  <span class="iconfont icon-shaixuan"></span>
                </template>
                <div class="radios">
                  <el-radio-group v-model="search.status" @change="changeStatus">
                    <el-radio :value="null">全部</el-radio>
                    <el-radio v-for="item in options" :key="item.value" :value="item.value">{{
                      item.name
                    }}</el-radio>
                  </el-radio-group>
                </div>
              </el-popover>
            </template>
            <template #default="scope">
              <el-tag v-if="scope.row.status == 1" type="warning">待审核</el-tag>
              <el-tag v-if="scope.row.status == 2">使用中</el-tag>
              <el-tag v-if="scope.row.status == 3" type="warning">已驳回</el-tag>
              <el-tag v-if="scope.row.status == 4" type="info">已禁用</el-tag>
            </template>
          </el-table-column>

          <!-- 联系人 -->
          <el-table-column show-overflow-tooltip label="联系人" prop="username" width="80" />

          <!-- 联系电话 -->
          <el-table-column show-overflow-tooltip label="联系电话" prop="phone" width="104" />

          <!-- 地址 -->
          <el-table-column
            show-overflow-tooltip
            prop="networkEmpLevel"
            label="地址"
            min-width="130"
          >
            <template #default="item">
              {{ item.row.province }}{{ item.row.city }}{{ item.row.area
              }}{{ item.row.town }}&nbsp;{{ item.row.address }}
            </template>
          </el-table-column>

          <!-- 创建时间 -->
          <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="128" />

          <!-- 更新时间 -->
          <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="128" />

          <!-- 操作 -->
          <el-table-column fixed="right" label="操作" width="90">
            <template #default="i">
              <div class="btns">
                <el-button link type="primary" @click="editPages(i.row)">编辑</el-button>
                <el-button
                  v-if="i.row.status == 1"
                  link
                  type="warning"
                  @click="checkFactoryType(i.row.id, 1)"
                  >审核</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <Pagination
          ref="pagination"
          :list_total="total"
          @size-change="requestEmpListApi"
          @current-change="requestEmpListApi"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="emp">
  import { ref, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import Pagination from '../../../components/Pagination/index.vue'
  import { getListFactory, checkFactory } from '../../../api/merchant'
  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  const loading = ref(false) // 动画加载
  const total = ref(0) // 服务人员列表总数量
  const empList = ref([]) // 服务人员列表
  const search = ref({
    // 服务人员搜索对象
    page: 1,
    limit: 50,
    keyword: '', // 关键词搜索：商家名称/商家序列号/电话/地址
    status: null,
  })
  const popoverDom = ref()
  // 状态
  const options = [
    { value: 1, name: '待审核' },
    { value: 2, name: '使用中' },
    { value: 3, name: '已驳回' },
    { value: 4, name: '已禁用' },
  ]
  // 获取服务人员列表
  const requestEmpListApi = () => {
    loading.value = true
    getListFactory(search.value).then((res) => {
      loading.value = false
      if (!res.data.success) {
        ElMessage.error(res.data.message)
      }
      total.value = Number(res.data?.data.total)
      empList.value = res.data?.data.rows
    })
  }
  // 状态变化
  const changeStatus = () => {
    requestEmpListApi()
    popoverDom.value.hide()
  }

  // 新增工程师
  const addEmp = () => {
    router.push('/merchant/new')
  }
  // 详情
  const detailPage = (row) => {
    router.push(`/merchant/listdetail/${row.id}`)
  }
  // 编辑
  function editPages(row) {
    if (row) {
      router.push(`/merchant/newdetail/${row.id}`)
    }
  }
  const checkFactoryType = (id, type) => {
    ElMessageBox({
      title: '提示',
      message: type == 1 ? `确认审核通过?` : '确认驳回？',
      showCancelButton: true,
      closeOnClickModal: false,
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      autofocus: false,
    })
      .then(() => {
        checkFactory(id, type).then((res) => {
          if (res.data.success) {
            requestEmpListApi()
          }
          ElMessage({
            type: res.data.success ? 'success' : 'error',
            message: res.data.message,
          })
        })
      })
      .catch()
  }

  onMounted(() => {
    requestEmpListApi()
  })
</script>

<style scoped lang="scss">
  @import './index.scss';
</style>
